<template>
  <div class="good-info" v-if="Object.keys(goodInfo).length !== 0">
    <div class="title">{{goodInfo.title}}</div>
    <div class="price">
      <span class="n-price">{{goodInfo.newPrice}}</span>
      <span class="o-price">{{goodInfo.oldPrice}}</span>
      <span class="discount">{{goodInfo.discount}}</span>
    </div>
    <div class="others">
      <span>{{goodInfo.columns[0]}}</span>
      <span>{{goodInfo.columns[1]}}</span>
      <span>{{goodInfo.services[goodInfo.services.length-1].name}}</span>
    </div>
    <div class="services">
       <div class="service-item" v-for="index in goodInfo.services.length-1" :key="index">
        <img :src="goodInfo.services[index-1].icon">
        <span>{{goodInfo.services[index-1].name}}</span>
      </div>
    </div>
  </div>
</template>

<script scoped>
export default {
  name: "DetailGoodInfo",
  props: {
    goodInfo: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {};
  },
  components: {}
};
</script>

<style lang='less' scoped>
  .good-info {
    margin-top: 0.3rem;
    padding: 0 .16rem;
    color: #999;
    border-bottom: .1rem solid #f2f5f8;
    .title {
      line-height: 1.5;
      font-size: .32rem;
      color: #222;
    }
    .price {
      margin-top: .2rem;
      .n-price {
        font-size: .48rem;
        color: @color-high-text;
      }
      .o-price {
        font-size: .26rem;
        margin-left: 0.1rem;
        text-decoration: line-through;
      }
      .discount {
        position: relative;
        top: -.16rem;
        font-size: .24rem;
        padding: 2px 5px;
        color: #fff;
        background-color: @color-high-text;
        border-radius: .16rem;
        margin-left: .1rem;
      }

    }
    .others {
        display: flex;
        justify-content: space-between;
        height: 0.6rem;
        line-height: 0.6rem;
        margin: 0.3rem 0.1rem 0 ;
        font-size: .26rem;
        border-bottom: 1px solid rgba(100,100,100,.1);
    }
    .services {
      display: flex;
      justify-content: space-between;
      margin: 0 .1rem;
      height: 1.2rem;
      line-height: 1.2rem;
      .service-item {
        img {
          width: 0.28rem;
          height: 0.28rem;
          vertical-align: middle;
          margin-right: 0.05rem;
        }
        span {
          font-size: .26rem;
          color: #333;
        }
      }
    }
  }
</style>
